<template> 
    <div class="container">
        <div class="divPageTop clearfix">
            <el-breadcrumb separator="/" class="pull-left">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>计划编组</el-breadcrumb-item>
            </el-breadcrumb> 
        </div> 
        <div class="divCard">
            <el-card class="box-card">
                <div slot="header" class="divHeader clearfix">
                    <span class="spanCardTitle pull-left">编组列表</span>
                    <el-button style="float: right; padding: 3px 0; margin-left:15px" type="text" @click="acRefresh"><i class="fa fa-refresh"></i> 刷新</el-button>
                    <el-button style="float: right; padding: 3px 0; margin-left:15px" type="text" @click="acShowDlg(1)"><i class="fa fa-plus"></i> 新建编组</el-button>
                </div>
                <div class="divTable">
                    <el-table
                        border
                        style = "100%" key="groupId"  :data="tableDatas"
                    >
                        <el-table-column fixed prop="groupCode" label="编号" width="90"/>
                        <el-table-column fixed prop="groupName" label="名称" width="90"/> 
                        <el-table-column fixed prop="groupId" label="状态" width="60"/> 
                        <el-table-column fixed prop="groupDesc" label="备注说明" />
                        <el-table-column fixed    width="200" label="操作" class="colActions">
                            <template slot-scope="scope">
                                <el-button @click="acShowDlg(2,scope.row)" type="text" size="small">修改</el-button>
                                <el-button @click="acDelete( scope.row.groupId)" type="text" size="small">删除</el-button>
                                <el-button @click="acShowMemberDlg(scope.row)" type="text" size="small">成员</el-button>
                                <el-button @click="acShowDlg(2,scope.row)" type="text" size="small">启动</el-button>
                                <el-button @click="acShowDlg(2,scope.row)" type="text" size="small">停止</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                
            </el-card>
        </div>
        <div class="divDlg">
            <el-dialog  title="编组信息" :visible.sync="getShowDlgFlag" width="30%" center>
                <div class="divForm" >
                    <el-form ref="currentInfo" :model="currentInfo" label-width="80px">
                        <el-form-item label="账号">
                            <el-input v-model="currentInfo.groupCode"></el-input>
                        </el-form-item>
                        <el-form-item label="名称">
                            <el-input v-model="currentInfo.groupName"></el-input>
                        </el-form-item>
                        <el-form-item label="备注说明">
                            <el-input v-model="currentInfo.groupDesc"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showDlgFlag = 0">取 消</el-button>
                    <el-button type="primary" @click="acPost">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog  title="编组成员" :visible.sync="memberDatas.showMemberDlgFlag" width="30%" center>
                <div class="divForm" >
                    <el-form   label-width="80px">
                        <el-form-item label="账号">
                            <el-select style="width:100%" v-model="memberDatas.currentMembers" multiple placeholder="请选择">
                                <el-option
                                v-for="item in members"
                                :key="item.accountId"
                                :label="item.caption"
                                :value="item.accountId">
                                </el-option>
                            </el-select>
                        </el-form-item> 
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="memberDatas.showMemberDlgFlag = false">取 消</el-button>
                    <el-button type="primary" @click="acPostGroupMembers">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        mounted(){
            var me = this;
            try{
                me.acRefresh();
                me.$mqtt.open().then( res=>{
                    console.log(res);
                });
            }
            catch(er){
                console.log(er);
            }
        },
        data(){
            return {
                tableDatas:[],
                currentInfo:{},
                showDlgFlag: 0 ,//0-关闭，1-新建，2-修改，3-成员 
                members:[],
                memberDatas:{
                    showMemberDlgFlag : false,
                    currentMembers:[],
                    currentGroupId:0
                }
            }
        },
        methods:{
            acRefresh(){
                var me = this;
                try{
                    me.showDlgFlag = 0;
                    me.memberDatas.showMemberDlgFlag = false;
                    var ps={}
                    me.$query('schedule/getItems' , ps ).then(res=>{
                        me.tableDatas = (res && res.length>1 && res[0] && res[0]!=null && res[0].length>0 )? res[0]:[];
                        me.members = (res && res.length>1 && res[1] && res[1]!=null && res[1].length>0 )? res[1]:[];
                        /*
                        me.groupMembers = (res && res.length>2 && res[2] && res[2]!=null && res[2].length>0 )? res[2]:[];
                        me.tableDatas.forEach( group=>{
                            group.members = groupMembers.filter( item=>{
                                return item.groupId == group.groupId;
                            })
                        })
                        */
                        me.currentInfo = {};
                    })
                }
                catch(er){
                    console.log(er);
                }
            },
            acShowDlg(flag , info){
                var me = this;
                try{
                    if( flag==1){
                        me.currentInfo = {
                            groupId:0 ,
                            groupCode:"",
                            groupName:"",
                            groupDesc:""
                        }
                        me.showDlgFlag = 1;
                    }
                    else if( flag==2){
                        me.currentInfo = info;
                        me.showDlgFlag = 2;
                    }
                }
                catch(er){
                    console.log(er);
                }
            },
            acPost( ){
                var me = this;
                try{ 
                    if( me.showDlgFlag ==1 || me.showDlgFlag==2){
                        var key = me.showDlgFlag==1?"schedule/new":"schedule/edit";
                        var ps = me.currentInfo;
                        me.$query(key , ps ).then(res=>{
                            if( res.affectedRows>0){
                                me.acRefresh();
                            }
                            else{
                                alert("提交失败！");
                            }
                        })

                    }

                }
                catch(er){
                    console.log(er);
                }
            },
            acDelete( groupId ){
                var me = this;
                try{ 
                    var flag = window.confirm('是否确定要删除该编组?');
                    if( flag){
                        me.$query('schedule/delete' , {groupId: groupId} ).then(res=>{
                            if( res.length>2 && res[2].affectedRows>0){
                                me.acRefresh();
                            }
                            else{
                                alert("删除失败！");
                            }
                        })
                    }

                }
                catch(er){
                    console.log(er);
                }
            },
            acShowMemberDlg( group ){
                var me = this;
                try{ 
                    var ps = {
                        groupId: group.groupId
                    };
                    var key = "schedule/membersGet"
                    me.memberDatas.currentMembers=[];
                    me.memberDatas.currentGroupId = group.groupId;
                    me.$query(key , ps ).then(res=>{
                        res.forEach(item=>{
                            me.memberDatas.currentMembers.push(item.memberId );
                        });
                        me.memberDatas.showMemberDlgFlag = true;
                    })
                }
                catch(er){
                    console.log(er);
                }
            },
            acPostGroupMembers(   ){
                var me = this;
                try{ 
                    var ps = {
                        groupId: me.memberDatas.currentGroupId ,
                        memberIds : '['+ me.memberDatas.currentMembers.join(',')+']'
                    };
                    var key = "schedule/membersSet"
                    me.$query(key , ps ).then(res=>{
                        if( res && res!=null && res.length>1){
                            me.acRefresh(); 
                        }
                        else{
                            alert('设置失败');
                        }
                    })
                }
                catch(er){
                    console.log(er);
                }
            }
        },
        computed:{
            getShowDlgFlag(){
                return this.showDlgFlag==1 || this.showDlgFlag==2;
            }
        }
    }
</script>

<style lang="less" scoped>

</style>